import React, { useEffect, useState } from 'react'
import './ddqr.css'
import { NavBar, Stepper } from 'antd-mobile'
import { LeftOutline, EnvironmentOutline, RightOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom';

const Ddqr = () => {
    const navigate = useNavigate();

    //手机号中间用*代替
    const maskPhoneNumber = (phone) => {
        return phone.slice(0, 3) + "****" + phone.slice(7);
    }
    //获取点击的商品信息
    const [xinxi, setxinxi] = useState([])
    useEffect(() => {
        const xin = localStorage.getItem('item')
        setxinxi(JSON.parse(xin))
    }, [])

    // 步进器
    const [min, setmin] = useState(1);
    const [total, setTotal] = useState(0);
    useEffect(() => {
        if (xinxi && xinxi.xprice !== undefined) {
            const price = parseFloat(xinxi.xprice);
            if (!isNaN(price) && !isNaN(min)) {
                setTotal(min * price + 10.00);
            }
        }
    }, [min, xinxi]);

    //提交
    const tijiao = () =>{
        navigate('/syt')
        localStorage.setItem('total', JSON.stringify(total))
    }
    return (
        <div>
            <NavBar backIcon={<LeftOutline />} onBack={() => navigate(-1)} className='yan'>确认订单</NavBar>
            <div className='ddqr-div'>
                <div className='ddqr-div1'>
                    <EnvironmentOutline className='ddqr-icon' />
                    <div className='ddqr-div2'>
                        <p className='ddqr-p'>
                            <span className='ddqr-span'>小凡</span>
                            <span>{maskPhoneNumber('18339366861')}</span>
                        </p>
                        <p className='ddqr-span1'>北京市朝阳区望京园</p>
                    </div>
                </div>
                <RightOutline className='ddqr-icon' />
            </div>
            <div className='ddqr-div3'>
                <div className='ddqr-div4'>
                    <img src={xinxi.img} alt="" className='ddqr-img' />
                    <div className='ddqr-div5'>
                        <p className='ddqr-p1'>{xinxi.name}</p>
                        <p className='ddqr-p2'>{xinxi.name}{xinxi.name}</p>
                        <p className='ddqr-p3'>￥{xinxi.xprice}</p>
                    </div>
                </div>
                <p className='ddqr-p4'>
                    <span className='ddqr-span2'>购买数量</span>
                    <Stepper min={1} max={100} step={1} value={min} onChange={(val) => setmin(val)} />
                </p>
                <p className='ddqr-p4'>
                    <span className='ddqr-span2'>支付方式</span>
                    <span className='ddqr-span2'>在线支付</span>
                </p>
                <p className='ddqr-p4'>
                    <span className='ddqr-span2'>快递方式</span>
                    <span className='ddqr-span2'>圆通快递</span>
                </p>
            </div>
            <div className='ddqr-div6'>
                <p className='ddqr-p5'>优惠信息</p>
                <p className='ddqr-p6'>
                    <span className='ddqr-span3'>无可用优惠券</span>
                    <RightOutline className='ddqr-icon1' />
                </p>
            </div>
            <div className='ddqr-div6' >
                <p className='ddqr-p6' style={{ paddingTop: '0.3rem' }}>
                    <span className='ddqr-span3'>商品金额</span>
                    <span className='ddqr-icon1' style={{ color: 'red' }}>￥{xinxi.xprice}</span>
                </p>
                <p className='ddqr-p6' style={{ marginTop: '0.2rem' }}>
                    <span className='ddqr-span3'>运费</span>
                    <span className='ddqr-icon1' style={{ color: 'red' }}>￥10.00</span>
                </p>
            </div>
            <div className='ddqr-div7'>
                <div className='ddqr-div8'>
                    <p className='ddqr-p7'>应付款</p>
                    <p className='ddqr-p8'>￥{total}</p>
                </div>
                <p className='ddqr-p9' onClick={tijiao}>提交订单</p>
            </div>
        </div>
    )
}
export default Ddqr;